<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>干饭地图Pro - 湖大专版</title>
  <!-- Tailwind CSS v3 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- 统一的 Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#0ea5e9',
            secondary: '#f97316',
            accent: '#10b981',
            neutral: '#64748b',
            'neutral-light': '#f1f5f9',
            'neutral-dark': '#334155',
            'primary-light': '#e0f2fe',
            'secondary-light': '#fef3c7',
            'accent-light': '#d1fae5'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
          boxShadow: {
            'card': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
            'card-hover': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
          }
        }
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .glass-effect {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .transition-all-300 {
        transition: all 300ms ease-in-out;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
    }
  </style>
</head>
<body class="bg-gray-50 font-sans">
  <!-- 应用容器 -->
  <div id="app" class="max-w-md mx-auto min-h-screen bg-white shadow-lg relative overflow-hidden">
    <!-- 页面容器 -->
    <div class="pages-container">
      <!-- 首页/地图页 -->
      <div id="map-page" class="page active h-screen flex flex-col">
        <!-- 顶部导航栏 -->
        <header class="bg-primary text-white p-4 shadow-md z-10">
          <div class="flex justify-between items-center">
            <div class="flex items-center">
              <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/e9b1b6accb56441994e63c819312c9f1~tplv-a9rns2rl98-image.image?rcl=202511041722169C8767554CB9F6FD0A98&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1764840172&x-signature=WtCHzId0M1v1vBjfloENMnUPy%2Bw%3D" alt="干饭地图Pro" class="h-8 w-8 mr-2">
              <h1 class="text-xl font-bold">干饭地图Pro</h1>
            </div>
            <button id="filter-btn" class="p-2 rounded-full hover:bg-blue-600 transition-all-300">
              <i class="fa fa-filter"></i>
            </button>
          </div>
          <!-- 搜索框 -->
          <div class="mt-3 relative">
            <input type="text" placeholder="搜索餐厅或美食" class="w-full py-2 px-4 rounded-full text-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
            <button class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500">
              <i class="fa fa-search"></i>
            </button>
          </div>
        </header>

        <!-- 地图容器 -->
        <div class="flex-1 relative overflow-hidden">
          <!-- 地图背景 -->
          <img src="https://p11-doubao-search-sign.byteimg.com/labis/7be04f173fd184373bc959f6600bdca0~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1777800158&x-signature=3EaquI4D4KBWqfzESu06x6UAIts%3D" alt="校园地图" class="w-full h-full object-cover">
          
          <!-- 餐厅标记点 -->
          <div class="restaurant-marker absolute top-[30%] left-[25%] transform -translate-x-1/2 -translate-y-1/2 cursor-pointer" data-id="1">
            <div class="w-10 h-10 bg-secondary rounded-full flex items-center justify-center text-white shadow-lg animate-pulse">
              <i class="fa fa-cutlery"></i>
            </div>
            <div class="mt-1 bg-white px-2 py-1 rounded-lg text-xs shadow-md">
              <div class="font-medium">学一食堂</div>
              <div class="flex items-center text-yellow-500">
                <i class="fa fa-star"></i>
                <span>4.8</span>
              </div>
            </div>
          </div>
          
          <div class="restaurant-marker absolute top-[45%] left-[60%] transform -translate-x-1/2 -translate-y-1/2 cursor-pointer" data-id="2">
            <div class="w-10 h-10 bg-secondary rounded-full flex items-center justify-center text-white shadow-lg animate-pulse">
              <i class="fa fa-cutlery"></i>
            </div>
            <div class="mt-1 bg-white px-2 py-1 rounded-lg text-xs shadow-md">
              <div class="font-medium">学二食堂</div>
              <div class="flex items-center text-yellow-500">
                <i class="fa fa-star"></i>
                <span>4.5</span>
              </div>
            </div>
          </div>
          
          <div class="restaurant-marker absolute top-[60%] left-[40%] transform -translate-x-1/2 -translate-y-1/2 cursor-pointer" data-id="3">
            <div class="w-10 h-10 bg-secondary rounded-full flex items-center justify-center text-white shadow-lg animate-pulse">
              <i class="fa fa-cutlery"></i>
            </div>
            <div class="mt-1 bg-white px-2 py-1 rounded-lg text-xs shadow-md">
              <div class="font-medium">小吃街</div>
              <div class="flex items-center text-yellow-500">
                <i class="fa fa-star"></i>
                <span>4.7</span>
              </div>
            </div>
          </div>
          
          <div class="restaurant-marker absolute top-[75%] left-[70%] transform -translate-x-1/2 -translate-y-1/2 cursor-pointer" data-id="4">
            <div class="w-10 h-10 bg-secondary rounded-full flex items-center justify-center text-white shadow-lg animate-pulse">
              <i class="fa fa-cutlery"></i>
            </div>
            <div class="mt-1 bg-white px-2 py-1 rounded-lg text-xs shadow-md">
              <div class="font-medium">清真餐厅</div>
              <div class="flex items-center text-yellow-500">
                <i class="fa fa-star"></i>
                <span>4.6</span>
              </div>
            </div>
          </div>
          
          <div class="restaurant-marker absolute top-[20%] left-[75%] transform -translate-x-1/2 -translate-y-1/2 cursor-pointer" data-id="5">
            <div class="w-10 h-10 bg-secondary rounded-full flex items-center justify-center text-white shadow-lg animate-pulse">
              <i class="fa fa-cutlery"></i>
            </div>
            <div class="mt-1 bg-white px-2 py-1 rounded-lg text-xs shadow-md">
              <div class="font-medium">咖啡屋</div>
              <div class="flex items-center text-yellow-500">
                <i class="fa fa-star"></i>
                <span>4.9</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 底部导航栏 -->
        <nav class="bg-white border-t border-gray-200 p-3 flex justify-around">
          <button class="nav-btn active flex flex-col items-center" data-page="map-page">
            <i class="fa fa-map-marker text-primary text-xl"></i>
            <span class="text-xs mt-1 text-primary">地图</span>
          </button>
          <button class="nav-btn flex flex-col items-center" data-page="list-page">
            <i class="fa fa-list text-gray-500 text-xl"></i>
            <span class="text-xs mt-1 text-gray-500">列表</span>
          </button>
          <button class="nav-btn flex flex-col items-center" data-page="favorite-page">
            <i class="fa fa-heart-o text-gray-500 text-xl"></i>
            <span class="text-xs mt-1 text-gray-500">收藏</span>
          </button>
          <button class="nav-btn flex flex-col items-center" data-page="profile-page">
            <i class="fa fa-user-o text-gray-500 text-xl"></i>
            <span class="text-xs mt-1 text-gray-500">我的</span>
          </button>
        </nav>
      </div>

      <!-- 餐厅列表页 -->
      <div id="list-page" class="page hidden h-screen flex flex-col">
        <!-- 顶部导航栏 -->
        <header class="bg-primary text-white p-4 shadow-md z-10">
          <div class="flex justify-between items-center">
            <h1 class="text-xl font-bold">餐厅列表</h1>
            <div class="flex space-x-3">
              <button id="sort-btn" class="p-2 rounded-full hover:bg-blue-600 transition-all-300">
                <i class="fa fa-sort"></i>
              </button>
              <button id="filter-btn-list" class="p-2 rounded-full hover:bg-blue-600 transition-all-300">
                <i class="fa fa-filter"></i>
              </button>
            </div>
          </div>
          <!-- 搜索框 -->
          <div class="mt-3 relative">
            <input type="text" placeholder="搜索餐厅或美食" class="w-full py-2 px-4 rounded-full text-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
            <button class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500">
              <i class="fa fa-search"></i>
            </button>
          </div>
        </header>

        <!-- 分类标签 -->
        <div class="overflow-x-auto scrollbar-hide bg-white border-b border-gray-200">
          <div class="flex space-x-3 p-3 min-w-max">
            <button class="category-btn active bg-primary text-white px-4 py-1 rounded-full text-sm">全部</button>
            <button class="category-btn bg-gray-200 text-gray-700 px-4 py-1 rounded-full text-sm">食堂</button>
            <button class="category-btn bg-gray-200 text-gray-700 px-4 py-1 rounded-full text-sm">小吃</button>
            <button class="category-btn bg-gray-200 text-gray-700 px-4 py-1 rounded-full text-sm">奶茶</button>
            <button class="category-btn bg-gray-200 text-gray-700 px-4 py-1 rounded-full text-sm">快餐</button>
            <button class="category-btn bg-gray-200 text-gray-700 px-4 py-1 rounded-full text-sm">火锅</button>
          </div>
        </div>

        <!-- 餐厅列表 -->
        <div class="flex-1 overflow-y-auto bg-gray-50 p-3">
          <!-- 餐厅卡片 -->
          <div class="restaurant-card bg-white rounded-xl shadow-card mb-3 overflow-hidden" data-id="1">
            <div class="relative">
              <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/6f0014f49ece46a590adaa9af7201d7f~tplv-a9rns2rl98-image.image?rcl=202511041722169C8767554CB9F6FD0A98&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1764840177&x-signature=%2BHEdUfwj0Ve4QwLHIv%2B5k9Bxka4%3D" alt="学一食堂" class="w-full h-40 object-cover">
              <div class="absolute top-2 right-2 bg-secondary text-white text-xs px-2 py-1 rounded-full">
                食堂
              </div>
              <button class="favorite-btn absolute top-2 left-2 w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-400">
                <i class="fa fa-heart-o"></i>
              </button>
            </div>
            <div class="p-3">
              <div class="flex justify-between items-start">
                <h3 class="text-lg font-bold">学一食堂</h3>
                <div class="flex items-center text-yellow-500">
                  <i class="fa fa-star"></i>
                  <span>4.8</span>
                </div>
              </div>
              <div class="flex items-center text-sm text-gray-500 mt-1">
                <i class="fa fa-map-marker mr-1"></i>
                <span>学生活动中心旁</span>
              </div>
              <div class="flex items-center text-sm text-gray-500 mt-1">
                <i class="fa fa-clock-o mr-1"></i>
                <span>06:30-22:00</span>
              </div>
              <div class="mt-2 flex flex-wrap gap-1">
                <span class="bg-primary-light text-primary text-xs px-2 py-1 rounded-full">早餐</span>
                <span class="bg-primary-light text-primary text-xs px-2 py-1 rounded-full">午餐</span>
                <span class="bg-primary-light text-primary text-xs px-2 py-1 rounded-full">晚餐</span>
                <span class="bg-primary-light text-primary text-xs px-2 py-1 rounded-full">便宜实惠</span>
              </div>
            </div>
          </div>

          <div class="restaurant-card bg-white rounded-xl shadow-card mb-3 overflow-hidden" data-id="2">
            <div class="relative">
              <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/6f0014f49ece46a590adaa9af7201d7f~tplv-a9rns2rl98-image.image?rcl=202511041722169C8767554CB9F6FD0A98&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1764840177&x-signature=%2BHEdUfwj0Ve4QwLHIv%2B5k9Bxka4%3D" alt="学二食堂" class="w-full h-40 object-cover">
              <div class="absolute top-2 right-2 bg-secondary text-white text-xs px-2 py-1 rounded-full">
                食堂
              </div>
              <button class="favorite-btn absolute top-2 left-2 w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-400">
                <i class="fa fa-heart-o"></i>
              </button>
            </div>
            <div class="p-3">
              <div class="flex justify-between items-start">
                <h3 class="text-lg font-bold">学二食堂</h3>
                <div class="flex items-center text-yellow-500">
                  <i class="fa fa-star"></i>
                  <span>4.5</span>
                </div>
              </div>
              <div class="flex items-center text-sm text-gray-500 mt-1">
                <i class="fa fa-map-marker mr-1"></i>
                <span>教学楼B区旁</span>
              </div>
              <div class="flex items-center text-sm text-gray-500 mt-1">
                <i class="fa fa-clock-o mr-1"></i>
                <span>07:00-21:30</span>
              </div>
              <div class="mt-2 flex flex-wrap gap-1">
                <span class="bg-primary-light text-primary text-xs px-2 py-1 rounded-full">午餐</span>
                <span class="bg-primary-light text-primary text-xs px-2 py-1 rounded-full">晚餐</span>
                <span class="bg-primary-light text-primary text-xs px-2 py-1 rounded-full">品种多样</span>
              </div>
            </div>
          </div>

          <div class="restaurant-card bg-white rounded-xl shadow-card mb-3 overflow-hidden" data-id="3">
            <div class="relative">
              <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/6f0014f49ece46a590adaa9af7201d7f~tplv-a9rns2rl98-image.image?rcl=202511041722169C8767554CB9F6FD0A98&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1764840177&x-signature=%2BHEdUfwj0Ve4QwLHIv%2B5k9Bxka4%3D" alt="小吃街" class="w-full h-40 object-cover">
              <div class="absolute top-2 right-2 bg-secondary text-white text-xs px-2 py-1 rounded-full">
                小吃
              </div>
              <button class="favorite-btn absolute top-2 left-2 w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-400">
                <i class="fa fa-heart-o"></i>
              </button>
            </div>
            <div class="p-3">
              <div class="flex justify-between items-start">
                <h3 class="text-lg font-bold">小吃街</h3>
                <div class="flex items-center text-yellow-500">
                  <i class="fa fa-star"></i>
                  <span>4.7</span>
                </div>
              </div>
              <div class="flex items-center text-sm text-gray-500 mt-1">
                <i class="fa fa-map-marker mr-1"></i>
                <span>学生宿舍区</span>
              </div>
              <div class="flex items-center text-sm text-gray-500 mt-1">
                <i class="fa fa-clock-o mr-1"></i>
                <span>10:00-23:00</span>
              </div>
              <div class="mt-2 flex flex-wrap gap-1">
                <span class="bg-primary-light text-primary text-xs px-2 py-1 rounded-full">小吃</span>
                <span class="bg-primary-light text-primary text-xs px-2 py-1 rounded-full">夜宵</span>
                <span class="bg-primary-light text-primary text-xs px-2 py-1 rounded-full">特色美食</span>
              </div>
            </div>
          </div>

          <div class="restaurant-card bg-white rounded-xl shadow-card mb-3 overflow-hidden" data-id="4">
            <div class="relative">
              <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/6f0014f49ece46a590adaa9af7201d7f~tplv-a9rns2rl98-image.image?rcl=202511041722169C8767554CB9F6FD0A98&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1764840177&x-signature=%2BHEdUfwj0Ve4QwLHIv%2B5k9Bxka4%3D" alt="清真餐厅" class="w-full h-40 object-cover">
              <div class="absolute top-2 right-2 bg-secondary text-white text-xs px-2 py-1 rounded-full">
                特色
              </div>
              <button class="favorite-btn absolute top-2 left-2 w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-400">
                <i class="fa fa-heart-o"></i>
              </button>
            </div>
            <div class="p-3">
              <div class="flex justify-between items-start">
                <h3 class="text-lg font-bold">清真餐厅</h3>
                <div class="flex items-center text-yellow-500">
                  <i class="fa fa-star"></i>
                  <span>4.6</span>
                </div>
              </div>
              <div class="flex items-center text-sm text-gray-500 mt-1">
                <i class="fa fa-map-marker mr-1"></i>
                <span>体育馆旁</span>
              </div>
              <div class="flex items-center text-sm text-gray-500 mt-1">
                <i class="fa fa-clock-o mr-1"></i>
                <span>07:30-21:00</span>
              </div>
              <div class="mt-2 flex flex-wrap gap-1">
                <span class="bg-primary-light text-primary text-xs px-2 py-1 rounded-full">清真食品</span>
                <span class="bg-primary-light text-primary text-xs px-2 py-1 rounded-full">午餐</span>
                <span class="bg-primary-light text-primary text-xs px-2 py-1 rounded-full">晚餐</span>
              </div>
            </div>
          </div>

          <div class="restaurant-card bg-white rounded-xl shadow-card mb-3 overflow-hidden" data-id="5">
            <div class="relative">
              <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/6f0014f49ece46a590adaa9af7201d7f~tplv-a9rns2rl98-image.image?rcl=202511041722169C8767554CB9F6FD0A98&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1764840177&x-signature=%2BHEdUfwj0Ve4QwLHIv%2B5k9Bxka4%3D" alt="咖啡屋" class="w-full h-40 object-cover">
              <div class="absolute top-2 right-2 bg-secondary text-white text-xs px-2 py-1 rounded-full">
                饮品
              </div>
              <button class="favorite-btn absolute top-2 left-2 w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-400">
                <i class="fa fa-heart-o"></i>
              </button>
            </div>
            <div class="p-3">
              <div class="flex justify-between items-start">
                <h3 class="text-lg font-bold">咖啡屋</h3>
                <div class="flex items-center text-yellow-500">
                  <i class="fa fa-star"></i>
                  <span>4.9</span>
                </div>
              </div>
              <div class="flex items-center text-sm text-gray-500 mt-1">
                <i class="fa fa-map-marker mr-1"></i>
                <span>图书馆一楼</span>
              </div>
              <div class="flex items-center text-sm text-gray-500 mt-1">
                <i class="fa fa-clock-o mr-1"></i>
                <span>08:00-23:00</span>
              </div>
              <div class="mt-2 flex flex-wrap gap-1">
                <span class="bg-primary-light text-primary text-xs px-2 py-1 rounded-full">咖啡</span>
                <span class="bg-primary-light text-primary text-xs px-2 py-1 rounded-full">甜点</span>
                <span class="bg-primary-light text-primary text-xs px-2 py-1 rounded-full">休闲</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 底部导航栏 -->
        <nav class="bg-white border-t border-gray-200 p-3 flex justify-around">
          <button class="nav-btn flex flex-col items-center" data-page="map-page">
            <i class="fa fa-map-marker text-gray-500 text-xl"></i>
            <span class="text-xs mt-1 text-gray-500">地图</span>
          </button>
          <button class="nav-btn active flex flex-col items-center" data-page="list-page">
            <i class="fa fa-list text-primary text-xl"></i>
            <span class="text-xs mt-1 text-primary">列表</span>
          </button>
          <button class="nav-btn flex flex-col items-center" data-page="favorite-page">
            <i class="fa fa-heart-o text-gray-500 text-xl"></i>
            <span class="text-xs mt-1 text-gray-500">收藏</span>
          </button>
          <button class="nav-btn flex flex-col items-center" data-page="profile-page">
            <i class="fa fa-user-o text-gray-500 text-xl"></i>
            <span class="text-xs mt-1 text-gray-500">我的</span>
          </button>
        </nav>
      </div>

      <!-- 收藏页面 -->
      <div id="favorite-page" class="page hidden h-screen flex flex-col">
        <!-- 顶部导航栏 -->
        <header class="bg-primary text-white p-4 shadow-md z-10">
          <h1 class="text-xl font-bold">我的收藏</h1>
        </header>

        <!-- 收藏列表 -->
        <div class="flex-1 overflow-y-auto bg-gray-50 p-3">
          <div class="text-center py-10 text-gray-500" id="empty-favorite">
            <i class="fa fa-heart-o text-5xl mb-3"></i>
            <p>还没有收藏餐厅</p>
            <p class="text-sm mt-1">去发现并收藏你喜欢的餐厅吧</p>
          </div>
          
          <!-- 收藏的餐厅将在这里动态显示 -->
          <div id="favorite-list" class="hidden">
            <!-- 收藏的餐厅卡片将通过JavaScript动态添加 -->
          </div>
        </div>

        <!-- 底部导航栏 -->
        <nav class="bg-white border-t border-gray-200 p-3 flex justify-around">
          <button class="nav-btn flex flex-col items-center" data-page="map-page">
            <i class="fa fa-map-marker text-gray-500 text-xl"></i>
            <span class="text-xs mt-1 text-gray-500">地图</span>
          </button>
          <button class="nav-btn flex flex-col items-center" data-page="list-page">
            <i class="fa fa-list text-gray-500 text-xl"></i>
            <span class="text-xs mt-1 text-gray-500">列表</span>
          </button>
          <button class="nav-btn active flex flex-col items-center" data-page="favorite-page">
            <i class="fa fa-heart text-primary text-xl"></i>
            <span class="text-xs mt-1 text-primary">收藏</span>
          </button>
          <button class="nav-btn flex flex-col items-center" data-page="profile-page">
            <i class="fa fa-user-o text-gray-500 text-xl"></i>
            <span class="text-xs mt-1 text-gray-500">我的</span>
          </button>
        </nav>
      </div>

      <!-- 个人中心页面 -->
      <div id="profile-page" class="page hidden h-screen flex flex-col">
        <!-- 顶部导航栏 -->
        <header class="bg-primary text-white p-4 shadow-md z-10">
          <h1 class="text-xl font-bold">个人中心</h1>
        </header>

        <!-- 个人信息 -->
        <div class="bg-white p-4 border-b border-gray-200">
          <div class="flex items-center">
            <div class="w-16 h-16 bg-gray-300 rounded-full overflow-hidden">
              <i class="fa fa-user text-4xl text-gray-500 flex items-center justify-center h-full"></i>
            </div>
            <div class="ml-4">
              <h2 class="text-lg font-bold">湖大学子</h2>
              <p class="text-sm text-gray-500">点击登录/注册</p>
            </div>
          </div>
        </div>

        <!-- 功能列表 -->
        <div class="flex-1 overflow-y-auto bg-gray-50">
          <div class="bg-white rounded-xl shadow-sm mx-3 mt-3 overflow-hidden">
            <div class="flex items-center p-4 border-b border-gray-100">
              <div class="w-10 h-10 bg-primary-light rounded-full flex items-center justify-center text-primary">
                <i class="fa fa-history"></i>
              </div>
              <span class="ml-3">浏览历史</span>
              <i class="fa fa-chevron-right text-gray-400 ml-auto"></i>
            </div>
            <div class="flex items-center p-4 border-b border-gray-100">
              <div class="w-10 h-10 bg-secondary-light rounded-full flex items-center justify-center text-secondary">
                <i class="fa fa-comment"></i>
              </div>
              <span class="ml-3">我的评价</span>
              <i class="fa fa-chevron-right text-gray-400 ml-auto"></i>
            </div>
            <div class="flex items-center p-4 border-b border-gray-100">
              <div class="w-10 h-10 bg-accent-light rounded-full flex items-center justify-center text-accent">
                <i class="fa fa-gift"></i>
              </div>
              <span class="ml-3">我的积分</span>
              <i class="fa fa-chevron-right text-gray-400 ml-auto"></i>
            </div>
          </div>

          <div class="bg-white rounded-xl shadow-sm mx-3 mt-3 overflow-hidden">
            <div class="flex items-center p-4 border-b border-gray-100">
              <div class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-gray-600">
                <i class="fa fa-cog"></i>
              </div>
              <span class="ml-3">设置</span>
              <i class="fa fa-chevron-right text-gray-400 ml-auto"></i>
            </div>
            <div class="flex items-center p-4 border-b border-gray-100">
              <div class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-gray-600">
                <i class="fa fa-question-circle"></i>
              </div>
              <span class="ml-3">帮助中心</span>
              <i class="fa fa-chevron-right text-gray-400 ml-auto"></i>
            </div>
            <div class="flex items-center p-4">
              <div class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-gray-600">
                <i class="fa fa-info-circle"></i>
              </div>
              <span class="ml-3">关于我们</span>
              <i class="fa fa-chevron-right text-gray-400 ml-auto"></i>
            </div>
          </div>

          <div class="mt-8 text-center">
            <p class="text-sm text-gray-500">干饭地图Pro - 湖大专版 v1.0.0</p>
          </div>
        </div>

        <!-- 底部导航栏 -->
        <nav class="bg-white border-t border-gray-200 p-3 flex justify-around">
          <button class="nav-btn flex flex-col items-center" data-page="map-page">
            <i class="fa fa-map-marker text-gray-500 text-xl"></i>
            <span class="text-xs mt-1 text-gray-500">地图</span>
          </button>
          <button class="nav-btn flex flex-col items-center" data-page="list-page">
            <i class="fa fa-list text-gray-500 text-xl"></i>
            <span class="text-xs mt-1 text-gray-500">列表</span>
          </button>
          <button class="nav-btn flex flex-col items-center" data-page="favorite-page">
            <i class="fa fa-heart-o text-gray-500 text-xl"></i>
            <span class="text-xs mt-1 text-gray-500">收藏</span>
          </button>
          <button class="nav-btn active flex flex-col items-center" data-page="profile-page">
            <i class="fa fa-user text-primary text-xl"></i>
            <span class="text-xs mt-1 text-primary">我的</span>
          </button>
        </nav>
      </div>

      <!-- 餐厅详情页 -->
      <div id="detail-page" class="page hidden h-screen flex flex-col">
        <!-- 顶部导航栏 -->
        <header class="bg-primary text-white p-4 shadow-md z-10 flex items-center">
          <button id="back-to-list" class="mr-3">
            <i class="fa fa-arrow-left"></i>
          </button>
          <h1 class="text-xl font-bold">餐厅详情</h1>
          <div class="ml-auto flex space-x-3">
            <button id="share-btn" class="p-2 rounded-full hover:bg-blue-600 transition-all-300">
              <i class="fa fa-share-alt"></i>
            </button>
            <button id="favorite-btn-detail" class="p-2 rounded-full hover:bg-blue-600 transition-all-300">
              <i class="fa fa-heart-o"></i>
            </button>
          </div>
        </header>

        <!-- 餐厅详情内容 -->
        <div class="flex-1 overflow-y-auto">
          <!-- 餐厅图片 -->
          <div class="h-48 bg-gray-200">
            <img id="detail-image" src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/6f0014f49ece46a590adaa9af7201d7f~tplv-a9rns2rl98-image.image?rcl=202511041722169C8767554CB9F6FD0A98&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1764840177&x-signature=%2BHEdUfwj0Ve4QwLHIv%2B5k9Bxka4%3D" alt="餐厅图片" class="w-full h-full object-cover">
          </div>

          <!-- 餐厅信息 -->
          <div class="bg-white p-4">
            <div class="flex justify-between items-start">
              <div>
                <h2 id="detail-name" class="text-xl font-bold">学一食堂</h2>
                <div class="flex items-center mt-1">
                  <div class="flex items-center text-yellow-500">
                    <i class="fa fa-star"></i>
                    <span id="detail-rating" class="ml-1">4.8</span>
                  </div>
                  <span class="text-gray-500 text-sm ml-2">(124条评价)</span>
                </div>
              </div>
              <div class="bg-secondary text-white text-xs px-2 py-1 rounded-full">
                食堂
              </div>
            </div>

            <div class="mt-3 space-y-2">
              <div class="flex items-center text-gray-600">
                <i class="fa fa-map-marker w-5"></i>
                <span id="detail-location">学生活动中心旁</span>
              </div>
              <div class="flex items-center text-gray-600">
                <i class="fa fa-clock-o w-5"></i>
                <span id="detail-hours">06:30-22:00</span>
              </div>
              <div class="flex items-center text-gray-600">
                <i class="fa fa-phone w-5"></i>
                <span id="detail-phone">12345678</span>
              </div>
            </div>

            <div class="mt-3 flex flex-wrap gap-1">
              <span class="bg-primary-light text-primary text-xs px-2 py-1 rounded-full">早餐</span>
              <span class="bg-primary-light text-primary text-xs px-2 py-1 rounded-full">午餐</span>
              <span class="bg-primary-light text-primary text-xs px-2 py-1 rounded-full">晚餐</span>
              <span class="bg-primary-light text-primary text-xs px-2 py-1 rounded-full">便宜实惠</span>
            </div>
          </div>

          <!-- 特色菜品 -->
          <div class="bg-white mt-3 p-4">
            <h3 class="text-lg font-bold mb-3">特色菜品</h3>
            <div class="space-y-3">
              <div class="flex items-center p-2 border-b border-gray-100">
                <div class="w-12 h-12 bg-gray-200 rounded-lg overflow-hidden">
                  <i class="fa fa-cutlery text-gray-400 flex items-center justify-center h-full"></i>
                </div>
                <div class="ml-3">
                  <h4 class="font-medium">香辣鸡腿饭</h4>
                  <p class="text-sm text-gray-500">¥12.00</p>
                </div>
                <div class="ml-auto flex items-center text-yellow-500 text-sm">
                  <i class="fa fa-star"></i>
                  <span>4.9</span>
                </div>
              </div>
              <div class="flex items-center p-2 border-b border-gray-100">
                <div class="w-12 h-12 bg-gray-200 rounded-lg overflow-hidden">
                  <i class="fa fa-cutlery text-gray-400 flex items-center justify-center h-full"></i>
                </div>
                <div class="ml-3">
                  <h4 class="font-medium">番茄炒蛋</h4>
                  <p class="text-sm text-gray-500">¥8.00</p>
                </div>
                <div class="ml-auto flex items-center text-yellow-500 text-sm">
                  <i class="fa fa-star"></i>
                  <span>4.7</span>
                </div>
              </div>
              <div class="flex items-center p-2">
                <div class="w-12 h-12 bg-gray-200 rounded-lg overflow-hidden">
                  <i class="fa fa-cutlery text-gray-400 flex items-center justify-center h-full"></i>
                </div>
                <div class="ml-3">
                  <h4 class="font-medium">扬州炒饭</h4>
                  <p class="text-sm text-gray-500">¥10.00</p>
                </div>
                <div class="ml-auto flex items-center text-yellow-500 text-sm">
                  <i class="fa fa-star"></i>
                  <span>4.6</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 用户评价 -->
          <div class="bg-white mt-3 p-4">
            <h3 class="text-lg font-bold mb-3">用户评价</h3>
            <div class="space-y-4">
              <div class="flex">
                <div class="w-10 h-10 bg-gray-300 rounded-full overflow-hidden">
                  <i class="fa fa-user text-gray-500 flex items-center justify-center h-full"></i>
                </div>
                <div class="ml-3 flex-1">
                  <div class="flex justify-between">
                    <h4 class="font-medium">小明同学</h4>
                    <span class="text-xs text-gray-500">2天前</span>
                  </div>
                  <div class="flex items-center text-yellow-500 text-sm mt-1">
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                  </div>
                  <p class="text-sm mt-2">食堂的香辣鸡腿饭真的超级好吃，鸡腿很大，肉质鲜嫩，价格也很实惠，强烈推荐！</p>
                </div>
              </div>
              <div class="flex">
                <div class="w-10 h-10 bg-gray-300 rounded-full overflow-hidden">
                  <i class="fa fa-user text-gray-500 flex items-center justify-center h-full"></i>
                </div>
                <div class="ml-3 flex-1">
                  <div class="flex justify-between">
                    <h4 class="font-medium">小红同学</h4>
                    <span class="text-xs text-gray-500">1周前</span>
                  </div>
                  <div class="flex items-center text-yellow-500 text-sm mt-1">
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star-o"></i>
                  </div>
                  <p class="text-sm mt-2">环境干净整洁，菜品丰富，就是高峰期人有点多，需要排队。总体来说很满意！</p>
                </div>
              </div>
            </div>
            <button class="w-full mt-3 py-2 text-primary text-sm border border-primary rounded-full">
              查看更多评价
            </button>
          </div>
        </div>

        <!-- 底部操作栏 -->
        <div class="bg-white border-t border-gray-200 p-3 flex justify-between items-center">
          <button class="flex items-center text-primary">
            <i class="fa fa-map-marker mr-1"></i>
            <span>导航</span>
          </button>
          <button class="bg-primary text-white px-6 py-2 rounded-full">
            我要评价
          </button>
        </div>
      </div>
    </div>

    <!-- 筛选弹窗 -->
    <div id="filter-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex-col">
      <div class="bg-white rounded-t-xl mt-auto p-4 flex-1 overflow-y-auto">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-lg font-bold">筛选条件</h2>
          <button id="close-filter" class="text-gray-500">
            <i class="fa fa-times"></i>
          </button>
        </div>

        <!-- 分类筛选 -->
        <div class="mb-4">
          <h3 class="font-medium mb-2">餐厅类型</h3>
          <div class="flex flex-wrap gap-2">
            <button class="filter-tag active bg-primary text-white px-3 py-1 rounded-full text-sm">全部</button>
            <button class="filter-tag bg-gray-200 text-gray-700 px-3 py-1 rounded-full text-sm">食堂</button>
            <button class="filter-tag bg-gray-200 text-gray-700 px-3 py-1 rounded-full text-sm">小吃</button>
            <button class="filter-tag bg-gray-200 text-gray-700 px-3 py-1 rounded-full text-sm">奶茶</button>
            <button class="filter-tag bg-gray-200 text-gray-700 px-3 py-1 rounded-full text-sm">快餐</button>
            <button class="filter-tag bg-gray-200 text-gray-700 px-3 py-1 rounded-full text-sm">火锅</button>
          </div>
        </div>

        <!-- 评分筛选 -->
        <div class="mb-4">
          <h3 class="font-medium mb-2">评分</h3>
          <div class="flex items-center space-x-4">
            <label class="flex items-center">
              <input type="checkbox" class="form-checkbox text-primary rounded">
              <span class="ml-2">4分以上</span>
            </label>
            <label class="flex items-center">
              <input type="checkbox" class="form-checkbox text-primary rounded">
              <span class="ml-2">3分以上</span>
            </label>
            <label class="flex items-center">
              <input type="checkbox" class="form-checkbox text-primary rounded">
              <span class="ml-2">2分以上</span>
            </label>
          </div>
        </div>

        <!-- 距离筛选 -->
        <div class="mb-4">
          <h3 class="font-medium mb-2">距离</h3>
          <div class="flex items-center space-x-4">
            <label class="flex items-center">
              <input type="checkbox" class="form-checkbox text-primary rounded">
              <span class="ml-2">500米内</span>
            </label>
            <label class="flex items-center">
              <input type="checkbox" class="form-checkbox text-primary rounded">
              <span class="ml-2">1公里内</span>
            </label>
            <label class="flex items-center">
              <input type="checkbox" class="form-checkbox text-primary rounded">
              <span class="ml-2">2公里内</span>
            </label>
          </div>
        </div>

        <!-- 特色筛选 -->
        <div class="mb-4">
          <h3 class="font-medium mb-2">特色服务</h3>
          <div class="flex flex-wrap gap-2">
            <button class="filter-tag bg-gray-200 text-gray-700 px-3 py-1 rounded-full text-sm">早餐</button>
            <button class="filter-tag bg-gray-200 text-gray-700 px-3 py-1 rounded-full text-sm">夜宵</button>
            <button class="filter-tag bg-gray-200 text-gray-700 px-3 py-1 rounded-full text-sm">便宜实惠</button>
            <button class="filter-tag bg-gray-200 text-gray-700 px-3 py-1 rounded-full text-sm">环境好</button>
            <button class="filter-tag bg-gray-200 text-gray-700 px-3 py-1 rounded-full text-sm">可外卖</button>
          </div>
        </div>
      </div>

      <!-- 筛选按钮 -->
      <div class="bg-white p-4 border-t border-gray-200">
        <div class="flex space-x-3">
          <button id="reset-filter" class="flex-1 py-2 border border-gray-300 rounded-lg text-gray-700">
            重置
          </button>
          <button id="apply-filter" class="flex-1 py-2 bg-primary text-white rounded-lg">
            应用筛选
          </button>
        </div>
      </div>
    </div>

    <!-- 排序弹窗 -->
    <div id="sort-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex-col">
      <div class="bg-white rounded-t-xl mt-auto p-4">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-lg font-bold">排序方式</h2>
          <button id="close-sort" class="text-gray-500">
            <i class="fa fa-times"></i>
          </button>
        </div>

        <div class="space-y-3">
          <button class="sort-option w-full flex justify-between items-center p-3 bg-primary-light text-primary rounded-lg">
            <span>推荐排序</span>
            <i class="fa fa-check"></i>
          </button>
          <button class="sort-option w-full flex justify-between items-center p-3 border border-gray-200 rounded-lg">
            <span>评分最高</span>
          </button>
          <button class="sort-option w-full flex justify-between items-center p-3 border border-gray-200 rounded-lg">
            <span>距离最近</span>
          </button>
          <button class="sort-option w-full flex justify-between items-center p-3 border border-gray-200 rounded-lg">
            <span>最新评价</span>
          </button>
        </div>
      </div>
    </div>
  </div>

  <script>
    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
      // 初始化数据
      const restaurants = [
        {
          id: 1,
          name: '学一食堂',
          type: '食堂',
          rating: 4.8,
          location: '学生活动中心旁',
          hours: '06:30-22:00',
          phone: '12345678',
          tags: ['早餐', '午餐', '晚餐', '便宜实惠'],
          image: 'https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/6f0014f49ece46a590adaa9af7201d7f~tplv-a9rns2rl98-image.image?rcl=202511041722169C8767554CB9F6FD0A98&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1764840177&x-signature=%2BHEdUfwj0Ve4QwLHIv%2B5k9Bxka4%3D'
        },
        {
          id: 2,
          name: '学二食堂',
          type: '食堂',
          rating: 4.5,
          location: '教学楼B区旁',
          hours: '07:00-21:30',
          phone: '12345679',
          tags: ['午餐', '晚餐', '品种多样'],
          image: 'https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/6f0014f49ece46a590adaa9af7201d7f~tplv-a9rns2rl98-image.image?rcl=202511041722169C8767554CB9F6FD0A98&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1764840177&x-signature=%2BHEdUfwj0Ve4QwLHIv%2B5k9Bxka4%3D'
        },
        {
          id: 3,
          name: '小吃街',
          type: '小吃',
          rating: 4.7,
          location: '学生宿舍区',
          hours: '10:00-23:00',
          phone: '12345680',
          tags: ['小吃', '夜宵', '特色美食'],
          image: 'https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/6f0014f49ece46a590adaa9af7201d7f~tplv-a9rns2rl98-image.image?rcl=202511041722169C8767554CB9F6FD0A98&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1764840177&x-signature=%2BHEdUfwj0Ve4QwLHIv%2B5k9Bxka4%3D'
        },
        {
          id: 4,
          name: '清真餐厅',
          type: '特色',
          rating: 4.6,
          location: '体育馆旁',
          hours: '07:30-21:00',
          phone: '12345681',
          tags: ['清真食品', '午餐', '晚餐'],
          image: 'https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/6f0014f49ece46a590adaa9af7201d7f~tplv-a9rns2rl98-image.image?rcl=202511041722169C8767554CB9F6FD0A98&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1764840177&x-signature=%2BHEdUfwj0Ve4QwLHIv%2B5k9Bxka4%3D'
        },
        {
          id: 5,
          name: '咖啡屋',
          type: '饮品',
          rating: 4.9,
          location: '图书馆一楼',
          hours: '08:00-23:00',
          phone: '12345682',
          tags: ['咖啡', '甜点', '休闲'],
          image: 'https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/6f0014f49ece46a590adaa9af7201d7f~tplv-a9rns2rl98-image.image?rcl=202511041722169C8767554CB9F6FD0A98&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1764840177&x-signature=%2BHEdUfwj0Ve4QwLHIv%2B5k9Bxka4%3D'
        }
      ];

      // 收藏列表
      let favorites = [];

      // 页面切换
      const navBtns = document.querySelectorAll('.nav-btn');
      const pages = document.querySelectorAll('.page');

      navBtns.forEach(btn => {
        btn.addEventListener('click', function() {
          const targetPage = this.getAttribute('data-page');
          
          // 更新导航按钮状态
          navBtns.forEach(btn => {
            btn.classList.remove('active');
            btn.querySelector('i').classList.remove('text-primary');
            btn.querySelector('i').classList.add('text-gray-500');
            btn.querySelector('span').classList.remove('text-primary');
            btn.querySelector('span').classList.add('text-gray-500');
          });
          
          this.classList.add('active');
          this.querySelector('i').classList.remove('text-gray-500');
          this.querySelector('i').classList.add('text-primary');
          this.querySelector('span').classList.remove('text-gray-500');
          this.querySelector('span').classList.add('text-primary');
          
          // 显示目标页面，隐藏其他页面
          pages.forEach(page => {
            if (page.id === targetPage) {
              page.classList.remove('hidden');
              page.classList.add('active');
            } else {
              page.classList.add('hidden');
              page.classList.remove('active');
            }
          });
        });
      });

      // 餐厅标记点点击事件
      const restaurantMarkers = document.querySelectorAll('.restaurant-marker');
      restaurantMarkers.forEach(marker => {
        marker.addEventListener('click', function() {
          const restaurantId = parseInt(this.getAttribute('data-id'));
          showRestaurantDetail(restaurantId);
        });
      });

      // 餐厅卡片点击事件
      const restaurantCards = document.querySelectorAll('.restaurant-card');
      restaurantCards.forEach(card => {
        card.addEventListener('click', function() {
          const restaurantId = parseInt(this.getAttribute('data-id'));
          showRestaurantDetail(restaurantId);
        });
      });

      // 显示餐厅详情
      function showRestaurantDetail(restaurantId) {
        const restaurant = restaurants.find(r => r.id === restaurantId);
        if (!restaurant) return;
        
        // 更新详情页内容
        document.getElementById('detail-name').textContent = restaurant.name;
        document.getElementById('detail-rating').textContent = restaurant.rating;
        document.getElementById('detail-location').textContent = restaurant.location;
        document.getElementById('detail-hours').textContent = restaurant.hours;
        document.getElementById('detail-phone').textContent = restaurant.phone;
        document.getElementById('detail-image').src = restaurant.image;
        
        // 显示详情页
        pages.forEach(page => {
          page.classList.add('hidden');
          page.classList.remove('active');
        });
        document.getElementById('detail-page').classList.remove('hidden');
        
        // 更新收藏按钮状态
        const favoriteBtn = document.getElementById('favorite-btn-detail');
        if (favorites.includes(restaurantId)) {
          favoriteBtn.innerHTML = '<i class="fa fa-heart"></i>';
          favoriteBtn.classList.add('text-red-500');
        } else {
          favoriteBtn.innerHTML = '<i class="fa fa-heart-o"></i>';
          favoriteBtn.classList.remove('text-red-500');
        }
      }

      // 返回列表按钮点击事件
      document.getElementById('back-to-list').addEventListener('click', function() {
        // 显示列表页
        pages.forEach(page => {
          page.classList.add('hidden');
          page.classList.remove('active');
        });
        document.getElementById('list-page').classList.remove('hidden');
        
        // 更新导航按钮状态
        navBtns.forEach(btn => {
          btn.classList.remove('active');
          btn.querySelector('i').classList.remove('text-primary');
          btn.querySelector('i').classList.add('text-gray-500');
          btn.querySelector('span').classList.remove('text-primary');
          btn.querySelector('span').classList.add('text-gray-500');
        });
        
        const listNavBtn = document.querySelector('[data-page="list-page"]');
        listNavBtn.classList.add('active');
        listNavBtn.querySelector('i').classList.remove('text-gray-500');
        listNavBtn.querySelector('i').classList.add('text-primary');
        listNavBtn.querySelector('span').classList.remove('text-gray-500');
        listNavBtn.querySelector('span').classList.add('text-primary');
      });

      // 收藏按钮点击事件
      const favoriteBtns = document.querySelectorAll('.favorite-btn');
      favoriteBtns.forEach(btn => {
        btn.addEventListener('click', function(e) {
          e.stopPropagation(); // 阻止事件冒泡
          const card = this.closest('.restaurant-card');
          const restaurantId = parseInt(card.getAttribute('data-id'));
          
          if (favorites.includes(restaurantId)) {
            // 取消收藏
            favorites = favorites.filter(id => id !== restaurantId);
            this.innerHTML = '<i class="fa fa-heart-o"></i>';
            this.classList.remove('text-red-500');
          } else {
            // 添加收藏
            favorites.push(restaurantId);
            this.innerHTML = '<i class="fa fa-heart"></i>';
            this.classList.add('text-red-500');
          }
          
          // 更新收藏页面
          updateFavoritePage();
        });
      });

      // 详情页收藏按钮点击事件
      document.getElementById('favorite-btn-detail').addEventListener('click', function() {
        const detailPage = document.getElementById('detail-page');
        const restaurantId = parseInt(detailPage.querySelector('.restaurant-card').getAttribute('data-id'));
        
        if (favorites.includes(restaurantId)) {
          // 取消收藏
          favorites = favorites.filter(id => id !== restaurantId);
          this.innerHTML = '<i class="fa fa-heart-o"></i>';
          this.classList.remove('text-red-500');
        } else {
          // 添加收藏
          favorites.push(restaurantId);
          this.innerHTML = '<i class="fa fa-heart"></i>';
          this.classList.add('text-red-500');
        }
        
        // 更新收藏页面
        updateFavoritePage();
      });

      // 更新收藏页面
      function updateFavoritePage() {
        const favoriteList = document.getElementById('favorite-list');
        const emptyFavorite = document.getElementById('empty-favorite');
        
        if (favorites.length === 0) {
          favoriteList.classList.add('hidden');
          emptyFavorite.classList.remove('hidden');
        } else {
          favoriteList.classList.remove('hidden');
          emptyFavorite.classList.add('hidden');
          
          // 清空收藏列表
          favoriteList.innerHTML = '';
          
          // 添加收藏的餐厅
          favorites.forEach(restaurantId => {
            const restaurant = restaurants.find(r => r.id === restaurantId);
            if (restaurant) {
              const card = document.createElement('div');
              card.className = 'restaurant-card bg-white rounded-xl shadow-card mb-3 overflow-hidden';
              card.setAttribute('data-id', restaurant.id);
              card.innerHTML = `
                <div class="relative">
                  <img src="${restaurant.image}" alt="${restaurant.name}" class="w-full h-40 object-cover">
                  <div class="absolute top-2 right-2 bg-secondary text-white text-xs px-2 py-1 rounded-full">
                    ${restaurant.type}
                  </div>
                  <button class="favorite-btn absolute top-2 left-2 w-8 h-8 bg-white rounded-full flex items-center justify-center text-red-500">
                    <i class="fa fa-heart"></i>
                  </button>
                </div>
                <div class="p-3">
                  <div class="flex justify-between items-start">
                    <h3 class="text-lg font-bold">${restaurant.name}</h3>
                    <div class="flex items-center text-yellow-500">
                      <i class="fa fa-star"></i>
                      <span>${restaurant.rating}</span>
                    </div>
                  </div>
                  <div class="flex items-center text-sm text-gray-500 mt-1">
                    <i class="fa fa-map-marker mr-1"></i>
                    <span>${restaurant.location}</span>
                  </div>
                  <div class="flex items-center text-sm text-gray-500 mt-1">
                    <i class="fa fa-clock-o mr-1"></i>
                    <span>${restaurant.hours}</span>
                  </div>
                  <div class="mt-2 flex flex-wrap gap-1">
                    ${restaurant.tags.map(tag => `<span class="bg-primary-light text-primary text-xs px-2 py-1 rounded-full">${tag}</span>`).join('')}
                  </div>
                </div>
              `;
              
              // 添加点击事件
              card.addEventListener('click', function() {
                const restaurantId = parseInt(this.getAttribute('data-id'));
                showRestaurantDetail(restaurantId);
              });
              
              // 添加收藏按钮点击事件
              const favoriteBtn = card.querySelector('.favorite-btn');
              favoriteBtn.addEventListener('click', function(e) {
                e.stopPropagation(); // 阻止事件冒泡
                const card = this.closest('.restaurant-card');
                const restaurantId = parseInt(card.getAttribute('data-id'));
                
                // 取消收藏
                favorites = favorites.filter(id => id !== restaurantId);
                this.innerHTML = '<i class="fa fa-heart-o"></i>';
                this.classList.remove('text-red-500');
                
                // 更新收藏页面
                updateFavoritePage();
              });
              
              favoriteList.appendChild(card);
            }
          });
        }
      }

      // 筛选弹窗
      const filterBtn = document.getElementById('filter-btn');
      const filterBtnList = document.getElementById('filter-btn-list');
      const filterModal = document.getElementById('filter-modal');
      const closeFilter = document.getElementById('close-filter');
      const applyFilter = document.getElementById('apply-filter');
      const resetFilter = document.getElementById('reset-filter');
      const filterTags = document.querySelectorAll('.filter-tag');

      // 打开筛选弹窗
      filterBtn.addEventListener('click', function() {
        filterModal.classList.remove('hidden');
      });

      filterBtnList.addEventListener('click', function() {
        filterModal.classList.remove('hidden');
      });

      // 关闭筛选弹窗
      closeFilter.addEventListener('click', function() {
        filterModal.classList.add('hidden');
      });

      // 应用筛选
      applyFilter.addEventListener('click', function() {
        // 这里可以添加筛选逻辑
        filterModal.classList.add('hidden');
      });

      // 重置筛选
      resetFilter.addEventListener('click', function() {
        // 重置筛选条件
        filterTags.forEach(tag => {
          tag.classList.remove('active', 'bg-primary', 'text-white');
          tag.classList.add('bg-gray-200', 'text-gray-700');
        });
        
        // 重置第一个标签为选中状态
        const firstTag = document.querySelector('.filter-tag');
        if (firstTag) {
          firstTag.classList.add('active', 'bg-primary', 'text-white');
          firstTag.classList.remove('bg-gray-200', 'text-gray-700');
        }
      });

      // 筛选标签点击事件
      filterTags.forEach(tag => {
        tag.addEventListener('click', function() {
          // 如果是同一组的标签，取消其他标签的选中状态
          const parent = this.parentElement;
          const siblings = parent.querySelectorAll('.filter-tag');
          siblings.forEach(sibling => {
            sibling.classList.remove('active', 'bg-primary', 'text-white');
            sibling.classList.add('bg-gray-200', 'text-gray-700');
          });
          
          // 选中当前标签
          this.classList.add('active', 'bg-primary', 'text-white');
          this.classList.remove('bg-gray-200', 'text-gray-700');
        });
      });

      // 排序弹窗
      const sortBtn = document.getElementById('sort-btn');
      const sortModal = document.getElementById('sort-modal');
      const closeSort = document.getElementById('close-sort');
      const sortOptions = document.querySelectorAll('.sort-option');

      // 打开排序弹窗
      sortBtn.addEventListener('click', function() {
        sortModal.classList.remove('hidden');
      });

      // 关闭排序弹窗
      closeSort.addEventListener('click', function() {
        sortModal.classList.add('hidden');
      });

      // 排序选项点击事件
      sortOptions.forEach(option => {
        option.addEventListener('click', function() {
          // 取消其他选项的选中状态
          sortOptions.forEach(opt => {
            opt.classList.remove('bg-primary-light', 'text-primary');
            opt.classList.add('border', 'border-gray-200');
            opt.querySelector('i')?.remove();
          });
          
          // 选中当前选项
          this.classList.add('bg-primary-light', 'text-primary');
          this.classList.remove('border', 'border-gray-200');
          
          // 添加勾选图标
          if (!this.querySelector('i')) {
            const checkIcon = document.createElement('i');
            checkIcon.className = 'fa fa-check';
            this.appendChild(checkIcon);
          }
          
          // 关闭弹窗
          sortModal.classList.add('hidden');
        });
      });

      // 分类标签点击事件
      const categoryBtns = document.querySelectorAll('.category-btn');
      categoryBtns.forEach(btn => {
        btn.addEventListener('click', function() {
          // 取消其他标签的选中状态
          categoryBtns.forEach(b => {
            b.classList.remove('active', 'bg-primary', 'text-white');
            b.classList.add('bg-gray-200', 'text-gray-700');
          });
          
          // 选中当前标签
          this.classList.add('active', 'bg-primary', 'text-white');
          this.classList.remove('bg-gray-200', 'text-gray-700');
        });
      });
    });
  </script>
</body>
</html>
